<template>
  <audio :src="props.url" controls="controls"
         ref="audioRef" :muted="!audioObj.isVolumn">
    您的浏览器不支持 audio 标签。
  </audio>
  <div class="audioBox">
    <div class="left">
      <i v-show="!audioObj.playing"
         class="icon el-icon-video-play"
         @click="play"></i>
      <i v-show="audioObj.playing"
         class="icon el-icon-video-pause"
         @click="pause"></i>
    </div>
     <div class="right">
      {{getTimeLabel()}}
    </div>
    <div class="center">
      <div class="center-t">
        <span>歌词。。。</span>
      </div>
      <div class="center-b">
        <el-slider style="width:200px"
                   :show-text="false"
                   v-model="audioObj.sliderValue"
                   @change="sliderValueChange"></el-slider>
      </div>
    </div>
    <div class="volumn">
      <i v-show="audioObj.isVolumn" class="icon el-icon-message-solid" @click="volumnClick"></i>
      <i v-show="!audioObj.isVolumn" class="icon el-icon-bell" @click="volumnClick"></i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, defineProps, ref } from "vue";

const props = defineProps({
  url: String,
});
const audioObj = reactive({
  playing: false,
  isVolumn: true,
  duration: 0,
  sliderValue: 0,
  currentTime: 0,
});
var timer = null;
var audioRef = ref();
// 显示时间
function getTimeLabel() {
  var pMin = Math.floor(audioObj.currentTime / 60);
  var pSec =
    Math.floor(audioObj.currentTime % 60) < 10
      ? "0" + Math.floor(audioObj.currentTime % 60)
      : Math.floor(audioObj.currentTime % 60);
  var nMin = Math.floor(audioObj.duration / 60);
  var nSec =
    Math.floor(audioObj.duration % 60) < 10
      ? "0" + Math.floor(audioObj.duration % 60)
      : Math.floor(audioObj.duration % 60);
  return `${pMin}:${pSec}/${nMin}:${nSec}`;
}
// 拖动进度条
function sliderValueChange(val) {
  var time = (val / 100) * audioObj.duration;
  audioRef.value.currentTime = time;
  play();
}
function play() {
  audioObj.playing = true;
  audioObj.duration = audioRef.value.duration;
  audioObj.currentTime = audioRef.value.currentTime;
  audioObj.sliderValue = (audioRef.value.currentTime / audioObj.duration) * 100;
  clearInterval(timer);
  timer = setInterval(function () {
    audioObj.currentTime = audioRef.value.currentTime;
    audioObj.sliderValue =
      (audioRef.value.currentTime / audioObj.duration) * 100;
  }, 250);
  audioRef.value.play();
}
function pause() {
  clearInterval(timer);
  audioObj.playing = false;
  audioRef.value.pause();
}
function volumnClick() {
  if (audioObj.isVolumn) {

  } else {

  }
  audioObj.isVolumn = !audioObj.isVolumn
}
</script>

<style lang="scss" scoped>
.audioBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  padding: 20px 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  .center{
    margin: 0 10px;
  }
  .icon {
    font-size: 40px;
  }
  .volumn .icon {
    font-size: 30px;
  }

}
</style>